<template>
	<view>
		<view class="mer-bg"></view>
		<view class="merinfo-list">
				<view class="mer-title">店铺信息</view>
				<view class="mer-contentlist">
						<view class="content-msg">
								<view  style="font-size: 30rpx;">店铺名称</view>
								<input type="text" maxlength="20" placeholder="请输入店铺名称"	class="mer-nameipt" />	
						</view>
				
					<view class="content-msg">
							<view  style="font-size: 30rpx;">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
							<input type="text" maxlength="10" placeholder="请输入姓名"	class="mer-nameipt" />	
					</view>
					<view class="content-msg">
							<view  style="font-size: 30rpx;">联系电话</view>
							<input type="text" maxlength="11" placeholder="请输入联系电话"	class="mer-nameipt" />	
					</view>
					
					<view class="content-msgright">
							<view style="display: flex;align-items: center;">
									<view  style="font-size: 30rpx;">所在地区</view>
									<view class="msg-area">请选择地区</view>	
							</view>				
							<image src="/static/image/find/right.png" mode="" class="area-right"></image>
					</view>
					<view class="content-msg">
							<view  style="font-size: 30rpx;">详细地址</view>
							<input type="text"  placeholder="请输入详细地址"	class="mer-nameipt" />	
					</view>
					
					<view class="content-msgright">
							<view style="display: flex;align-items: center;">							
									<picker @change="bindPickerChange" :range="isChange" v-model="index">
										<view class="picker">
											<view class="appear_name" style="width:600rpx;">
													<span style="padding-right:24rpx;">行业类型</span> 
												{{!isChange[index] ? '请选择': isChange[index] }}
											</view>
										</view>
									</picker>
							</view>				
							<image src="/static/image/find/right.png" mode="" class="area-right"></image>
					</view>
					<view class="content-msgright">
							<view style="display: flex;align-items: center;">
							<!-- 		<view  style="font-size: 30rpx;">营业时间</view>						
									<view class="msg-area">请选择营业时间</view>	 -->
									<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
											<view class="picker">
												<view class="appear_name" style="width:600rpx;">
													<span style="padding-right:24rpx;">营业时间</span> 
													{{!time ? '请选择营业时间': time }}
												</view>
											</view>
										</picker>
							</view>				
							<image src="/static/image/find/right.png" mode="" class="area-right"></image>
					</view>
					
					<view class="content-msgright" style="border:none">
							<view style="display: flex;align-items: center;">
									<view  style="font-size: 30rpx;">分段营业</view>
									<view class="msg-area">请选择</view>	
							</view>				
							<image src="/static/image/find/right.png" mode="" class="area-right"></image>
					</view>
					
				</view>			
		</view>
		
		<view class="merinfo-list merimg">
			 
		<view class="mer-title">店铺图片</view>
		 <view class="merimg-infolist">
				<view class="title-box" style="margin-top: 20rpx;">
					<view class="title-box-txt">店铺照片</view>
					<view class="title-box-tip">1、图片分辨率不超过220*220；</view>
						<view class="title-box-tip">2、大小不超过5M；</view>
				</view>
				<view class="up-imgs">
					<image src="/static/image/find/upload.png" mode=""></image>
					<view class="">
						上传图片
					</view>
				</view>	
			</view>
			<view class="list-s">
				<view class="list-s-title">
					营业执照
				</view>
				<view class="list-s-tip">
				 * 请按照上传示例上传图片，并保持图片边框清晰
				</view>
				<view class="up-img">
					<view class="no-img" @click="choiceImg">
						<image :src="zhizhaoUrl ? zhizhaoUrl : '/static/image/mine/sfz-no.png'" mode=""></image>
						<view v-show="!zhizhaoUrl" class="" style="margin-top: 20rpx;">
							请上传营业执照
						</view>
					</view>
				</view>	
			</view>	
     </view>
				 
			<view class="te-xieyi">
				<radio color="#000" @click="checkedTe" style="transform:scale(0.7);" :checked="checkBuTe" />
				阅读并同意 <span @click="handleVipXY">《商家入驻条款》</span>
			</view>
			
			<view class="paybtn" @click="paySuccess">申请入驻</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			zhizhaoUrl:'',
		 	checkBuTe: false,
		   isChange: ['娱乐','餐饮','搭子','服务'],
			 index: null,
			 time:null,
			}
		},
		methods: {
			
		checkedTe() {
			this.checkBuTe = !this.checkBuTe
		},
		bindPickerChange(e) {
			this.index = e.detail.value
		},
		
		paySuccess() {
			if (this.checkBuTe == false) {
				uni.showModal({
					title: '提示',
					content: ' 请勾选并同意《商家入驻条款》？',
					confirmColor: "#000000",
					cancelColor: "#999999",
					success: (res) => {
						if (res.confirm) {
							this.checkBuTe = true
						}
					}
				})
				return
			}
		
			this.$helper.to('/pages/views/myWallet/drawalApply')
		},
     // 选择图片操作
			choiceImg(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: ress => {
						this.uploadUserImg(ress.tempFilePaths[0],index);
					}
				});
			},
			uploadUserImg(blob,index) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: 'http://120.55.58.244:9097/system/oss/upload',
					filePath: blob,
					name: 'file',
					header: {
						Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						
							this.zhizhaoUrl = JSON.parse(res.data).data.url;
						
						uni.showToast({
							title: '上传成功',
							duration: 1000
						});
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mer-bg {
		width: 100%;
		height: 240rpx;
		background: url("/static/image/mine/mine-merchant.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.merinfo-list{
		width: 690rpx;
		height: 770rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:30rpx auto;
	}

	.merimg{
		height:100%;
		padding-bottom:40rpx;
	}
	.merimg-infolist{
		margin:0 30rpx;
		padding-bottom:40rpx;
		border-bottom: 1px solid #efefef;
	}
	.mer-title{
	
		margin-left:30rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		padding-top:40rpx;
		font-weight: bold;
	}
	.mer-contentlist{	
		margin:0 30rpx;
	}
	.content-msg{
		display: flex;
		align-items: center;	
		height:84rpx;
		border-bottom: 1rpx solid #efefef;
	}
	.content-msgright{
		display: flex;
		align-items: center;	
		justify-content: space-between;
		height:84rpx;
		border-bottom: 1rpx solid #efefef;
	}
	.mer-nameipt{
		font-size: 30rpx;
		color:#000;
		padding-left:30rpx;
	}
	.msg-area{
		margin-left:30rpx;
		font-size: 30rpx;
		color: #666666;
	}
	.appear_name {
		color: rgb(42, 42, 42);
	}
	.area-right{
		width:16rpx;
		height:28rpx;
	}
	
	.title-box {
		margin-bottom:20rpx;
		.title-box-txt {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin:24rpx 0rpx;
		}
	
		.title-box-tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin:6rpx 0rpx;
		}
	}
	
	.up-imgs{
		width: 219rpx;
		height: 219rpx;
		margin-left:30rpx;
		border-radius: 16rpx;
		border: 1rpx solid #CCCCCC;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		image{
			width: 68rpx;
			height: 68rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			margin-bottom: 10rpx;
		}
	}
	
	.list-s {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-weight: 400;
	
		.list-s-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}
	
		.list-s-tip {
			font-size: 24rpx;
			color: #666666;
			margin-top: 10rpx;
		}
	}
	
	.up-img {
		width: 582rpx;
		height: 352rpx;
		background-image: url('/static/image/mine/mine-zhizhao.png');
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		margin-top: 30rpx;
		.no-img {
			width: 230rpx;
			height: 200rpx;
			margin: 0 auto;
			color: #333333;
			text-align: center;
			font-size: 24rpx;
			image {
				width: 140rpx;
				height: 140rpx;
				margin-top: 82rpx;
			}
		}
	}

	.te-xieyi {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 48rpx;
		padding-bottom: 30rpx;
		color: #999;
		font-size: 24rpx;
	
		span {
			color: #000;
		}
	}
	
	.paybtn {
		margin: 0 auto;
		width: 690rpx;
		height: 90rpx;
		border-radius: 49rpx;
		background: #000;
		line-height: 90rpx;
		color: #FEC92F;
		font-size: 32rpx;
		text-align: center;
	
	}
</style>